<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

*{
    margin: 0;
    padding: 0;
}

/*  448 x 252  */
.f {
    width: 448px;
    height: 252px;
    margin: 20px auto;
}

.mask{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    margin-top: -34px;

    background: rgba(255,255,255,0.3) url(../HTML/picture/arr.png) no-repeat center 150px;
    display: none;
}

.f:hover .mask{
    display: block;
}

</style>
</head>

<body>
<div class="f">
<img src="../HTML/picture/tudou.jpg" />
<div class="mask"></div>
</div>
    
</body>
</html>